<template>
  <div class="order">
    <van-nav-bar title="我的订单" />
    <van-tabs v-model:active="active" sticky>
      <van-tab title="全部"></van-tab>
      <van-tab title="使用中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>

    <div class="order-list">
      <!-- 订单卡片示例 -->
      <van-cell-group
        inset
        class="order-card"
        v-for="order in filteredOrders"
        :key="order.id"
      >
        <van-cell :title="'订单号：' + order.orderNo">
          <template #right-icon>
            <span :class="['status', order.status]">{{
              order.statusText
            }}</span>
          </template>
        </van-cell>

        <van-cell>
          <div class="car-info">
            <div class="car-image">
              <img :src="order.carImage" :alt="order.carName" />
            </div>
            <div class="car-details">
              <h3>{{ order.carName }}</h3>
              <p class="car-type">{{ order.carType }}</p>
              <div class="time-info">
                <p>取车时间：{{ order.pickupTime }}</p>
                <p>还车时间：{{ order.returnTime }}</p>
              </div>
            </div>
          </div>
        </van-cell>

        <van-cell>
          <div class="price-action">
            <span class="price">总价：¥{{ order.price }}</span>
            <van-button
              v-if="order.status === 'completed'"
              type="primary"
              size="small"
              @click="goToComment(order)"
              >评价</van-button
            >
          </div>
        </van-cell>
      </van-cell-group>
    </div>

    <TabBar />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import TabBar from "@/components/TabBar.vue";

const router = useRouter();
const active = ref(0);

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNo: "DD20240301001",
    status: "using",
    statusText: "使用中",
    carName: "丰田凯美瑞",
    carType: "2.0L 自动 舒适版",
    carImage: "http://localhost:3000/uploads/1739724068843-575944495.jpg",
    pickupTime: "2024-03-01 10:00",
    returnTime: "2024-03-03 10:00",
    price: 600,
  },
  {
    id: 2,
    orderNo: "DD20240228001",
    status: "completed",
    statusText: "已完成",
    carName: "本田雅阁",
    carType: "2.0L 自动 豪华版",
    carImage: "http://localhost:3000/uploads//1739724999690-581966878.jpg",
    pickupTime: "2024-02-28 15:00",
    returnTime: "2024-03-01 15:00",
    price: 400,
  },
]);

// 根据标签页筛选订单
const filteredOrders = computed(() => {
  if (active.value === 0) return orders.value; // 全部
  if (active.value === 1)
    return orders.value.filter((order) => order.status === "using"); // 使用中
  if (active.value === 2)
    return orders.value.filter((order) => order.status === "completed"); // 已完成
  return orders.value;
});

// 去评价
const goToComment = (order) => {
  router.push({
    path: "/comment",
    query: { orderId: order.id },
  });
};
</script>

<style scoped lang="scss">
.order {
  padding-bottom: 50px;
  background: #f7f8fa;
  min-height: 100vh;
}

.order-card {
  margin: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.car-info {
  display: flex;
  padding: 8px 0;

  .car-image {
    width: 120px;
    height: 80px;
    margin-right: 12px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .car-details {
    flex: 1;

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .car-type {
      color: #666;
      font-size: 14px;
      margin: 4px 0;
    }

    .time-info {
      font-size: 14px;
      color: #666;

      p {
        margin: 4px 0;
      }
    }
  }
}

.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .price {
    color: #ff4646;
    font-weight: bold;
    font-size: 16px;
  }
}

.status {
  font-size: 14px;

  &.using {
    color: #ff9900;
  }
  &.completed {
    color: #00b578;
  }
}

// 适配暗色模式
@media (prefers-color-scheme: dark) {
  .order-card {
    background: #1c1c1e !important;

    .car-details h3 {
      color: #fff !important;
    }

    .car-type,
    .time-info {
      color: #999 !important;
    }
  }
}
</style> 